<template>
  <div
    :class="{'mobile-empty-container': showMobilePage && !isDeniedPlaceholder}"
    :style="{'marginTop': emptyImgTop}"
    class="empty-placeholder-container">
    <img v-if="showImg" :src="defaultImg" :style="{'width': defaultImgSize,'marginBottom': marginBottom}" alt="">
    <div v-if="boldText" class="bold-text">{{ boldText }}</div>
    <div v-if="!dangerHtmlRender" :style="{'marginTop': emptyTextTop + 'px', color: textColor}" class="empty-text">{{ text }}</div>
    <div v-else :style="{'marginTop': emptyTextTop + 'px', color: textColor}" class="empty-text" v-html="text">{{ text }}</div>
  </div>
</template>
<script>
import mobileDefaultImg from '@/assets/home/emptyIcon.png';
import emptyDefaultImg from '@/assets/empty-table-data.png';
import { mapState } from 'vuex';
export default {
  name: 'EmptyPlaceholder',
  props: {
    emptyImg: {
      type: String,
      default: ''
    },
    marginBottom: {
      type: String,
      default: ''
    },
    textColor: {
      type: String,
      default: '#666'
    },
    dangerHtmlRender: {
      type: Boolean,
      default: false
    },
    showImg: {
      type: Boolean,
      default: true
    },
    text: {
      type: String,
      default: '暂无数据'
    },
    imageSize: {
      type: String,
      default: ''
    },
    emptyTextTop: {
      type: Number,
      default: 20
    },
    isDeniedPlaceholder: {
      type: Boolean,
      default: false
    },
    emptyImgTop: {
      type: String,
      default: '100px'
    },
    boldText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      emptyDefaultImg,
      mobileDefaultImg
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    defaultImg() {
      return this.emptyImg ? this.emptyImg : this.showMobilePage ? this.mobileDefaultImg : this.emptyDefaultImg;
    },
    defaultImgSize() {
      // return this.imageSize ? this.imageSize : this.showMobilePage ? '120px' : '190px';
      return this.imageSize ? this.imageSize : '120px';
    }
  }
};
</script>
<style lang="scss" scoped>
.empty-placeholder-container {
  // text-align: center;
  // position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  // top: 30px;
  .empty-text {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
  }
}
.mobile-empty-container {
  margin-top: 50px;
}
.bold-text {
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
  line-height: 20px;
}
</style>
